<template>
  <div class="mod-member">
    <el-button type="success" size="mini" style="margin-left:96.5%;" @click="back()">返回</el-button>
    <div class="member-container">
      <div class="member-stem">基本信息</div>
      <div class="member-content">
        <img :src="dataInfo.iconUrl" alt="个性头像">
      </div>
      <div class="member-content">
        <div class="member-item">
          <div class="item-left">账号:</div>
          <div class="item-right">{{dataInfo.account}}</div>
        </div>
        <div class="member-item">
          <div class="item-left">昵称:</div>
          <div class="item-right">{{dataInfo.nickname}}</div>
        </div>
        <div class="member-item">
          <div class="item-left">手机:</div>
          <div class="item-right">{{dataInfo.mobile}}</div>
        </div>
        <div class="member-item">
          <div class="item-left">邮箱:</div>
          <div class="item-right">{{dataInfo.email}}</div>
        </div>
        <div class="member-item">
          <div class="item-left">等级:</div>
          <div class="item-right">
            <template>
              <el-tag v-for="item in levelList"  v-if="dataInfo.levelId === item.id" size="small" type="success" :key="item.id">
               {{ item.name }}
              </el-tag>
            </template>
          </div>
        </div>
      </div>
      <div class="member-content">
        <div class="member-item">
          <div class="item-left">性别:</div>
          <div class="item-right">
            <template>
              <el-tag v-if="dataInfo.gender === 0" size="small" type="success">女</el-tag>
              <el-tag v-else-if="dataInfo.gender === 1" size="small" type="success">男</el-tag>
            </template>
          </div>
        </div>
        <div class="member-item">
          <div class="item-left">生日:</div>
          <div class="item-right">{{dataInfo.birthday}}</div>
        </div>
        <div class="member-item">
          <div class="item-left">城市:</div>
          <div class="item-right">{{dataInfo.city}}</div>
        </div>
        <div class="member-item">
          <div class="item-left">职业:</div>
          <div class="item-right">{{dataInfo.job}}</div>
        </div>
      </div>
      <div class="member-content">
        <div class="member-item">
          <div class="item-left">积分:</div>
          <div class="item-right">{{dataInfo.integral}}</div>
        </div>
        <div class="member-item">
          <div class="item-left">成长值:</div>
          <div class="item-right">{{dataInfo.growth}}</div>
        </div>
        <div class="member-item">
          <div class="item-left">注册时间:</div>
          <div class="item-right">{{dataInfo.createTime}}</div>
        </div>
        <div class="member-item">
          <div class="item-left">账号状态:</div>
          <div class="item-right">
            <template>
              <el-tag v-if="dataInfo.commonStatus === 1" size="small" type="success">正常</el-tag>
              <el-tag v-else-if="dataInfo.commonStatus === 2" size="small" type="success">封禁</el-tag>
            </template>
          </div>
        </div>
        <div class="member-item">
          <div class="item-left">个性签名:</div>
          <div class="item-right">{{dataInfo.selfSign}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        id: '',
        dataInfo: {},
        levelList: []
      }
    },
    activated () {
      this.getDataList()
      this.id = this.$route.query.memberId
      this.levelList = this.getLevels()
    },
    created () {
      this.id = this.$route.query.memberId
      this.levelList = this.getLevels()
    },
    methods: {
      // 会员详情
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl(`/mall-user/user/queryUserById/${this.id}`),
          method: 'get'
        }).then(({data}) => {
          if (data.data && data.code === 200) {
            this.dataInfo = data.data
          } else {
            this.$message({
              showClose: true,
              message: data.message,
              type: 'warning',
              center: true
            })
          }
        })
      },
      // 返回
      back () {
        this.$router.push({path: '/member-member'})
      },
      // 获取全部等级
      getLevels () {
        this.$http({
          url: this.$http.adornUrl('/mall-user/user/level/queryList'),
          method: 'get'
        }).then(({data}) => {
          this.levelList = data.data
        })
      }
    }
  }
</script>
<style scoped>
.member-container{
  background-color: #f0f0f0;
  border-radius: 5px;
  box-shadow: 0 0 5px 5px rgba(228, 227, 227, 0.3);  /* 设置模拟的虚化边框 */
  overflow: hidden;
  margin: 10px auto;
}
.member-stem{
  font-size: 25px;
  font-family: 华文行楷;
  color: tomato;
  padding: 10px 10px 0 10px;
}
.member-content{
  float: left;
  padding: 10px;
}
.member-item{
  width: 360px;
  display: flex;
  margin: 20px 0 20px 10px;
  font-size: 15px;
}
.item-left{
  color: #8a8787;
}
.item-right{
  margin-left: 15px;
  font-weight: bold;
}
img{
  width: 180px;
  height: 180px;
  margin: 0 30px;
  border-radius: 50%; /* 将边框设置为圆形 */
  overflow: hidden; /* 隐藏超出边界的内容 */
}
</style>